<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="index.css">
	<style>
		* {
		    padding: 0;
		    margin: 0;
		    list-style: none;
		  }
		  .app{
			 width: 800px;
			  height: 600px;
			  /* border:5px solid #666666 ; */
			  margin: 0 auto;
			  padding: 0;
			  background:url(http://yfgssb.gitee.io/oldman-website/img/3.jpg);
		  }
		  h2 {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    margin: 10px 0;
		  }
		  
		  h2 .mask-num {
		    height: 20px;
		    padding: 0 5px;
		    border-radius: 20px;
		    background-color: #e6e6fa;
		    color: #666;
		    font-size: 14px;
		  }
		  
		  body {
		    background-color: white;
		  }
		  
		  .container {
		    width: 600px;
		    margin: 0 auto;
		    padding: 0 10px;
			
		  }
		  
		  .header {
			  padding-top: 120px;
		    height: 50px;
		   /* background-color: #333; */
		  }
		  
		  .header .container {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		  }
		  
		  .header .container .logo {
		    width: 100px;
		    line-height: 50px;
		    color: white;
		    font-size: 24px;
		    cursor: pointer;
		  }
		  
		  .header .container .input-area {
		    width: 60%;
		  }
		  
		  .header .container .input-area input {
		    width: 80%;
		    height: 24px;
		    text-indent: 10px;
		    border-radius: 5px;
		    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
		    border: none;
		    outline: none;
		  }
		  
		  .header .container .input-area button {
		    width: 15%;
		    height: 24px;
		    vertical-align: center;
		  }
		  
		  .mask-list li {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    height: 32px;
		    line-height: 32px;
		    margin-bottom: 10px;
		    padding: 0 15px;
		    border-radius: 3px;
		    border-left: 15px solid orangered;
		    background-color: #fff;
			 opacity: .8;
		  }
		  
		  .mask-list.complete-list li {
		    border-left-color: #999;
		    opacity: .5;
		  }
		  .container:nth-child(1){
			background-color: skyblue;

		}
		.container:nth-child(2){
			background-color: pink;

		}
		.container:nth-child(3){
			background-color:moccasin;
		
		}
	</style>
</head>
<body>
    <div class="app">
        <div class="header">
            <div class="container">
                <div class="logo">任务清单</div>
                <div class="input-area">
                    <input type = "text" @input = "handleInput" :value = "curMask" placeholder="请输入任务"/>
                    <button @click = "addMask">添加</button>
                </div>
            
			</div>
        </div>
        <div class="container">
            <h2>
                <span>未完成任务</span>
                <span class="mask-num">{{ needDoList.length }}</span>
            </h2>
            <ul class="mask-list">
                <li 
                   v-for = "(mask,index) in needDoList"
                   :key = "mask.id"
                >
                    <div>
                        <input type="checkbox" @change = "doCheck(index,'need')"/>
                        <span>{{ mask.title }}</span>
                    </div>
                    <button @click = "deleteMask(index,'need')">删除</button>
                </li>
            </ul>
        </div>
        <div class="container">
            <h2>
                <span>已经完成</span>
                <span class="mask-num">{{ completeList.length }}</span>
            </h2>
            <ul class="mask-list complete-list">
                <li
                    v-for = "mask in completeList"
                    :key = "mask.id"
                >
                    <div>
                        <input type="checkbox" @change = "doCheck(index,'complete')" />
                        <span>{{ mask.title }}</span>
                    </div>
                    <button @click = "deleteMask(index,'complete')">删除</button>
                </li>
            </ul>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                curMask:'',
                needDoList:[],
                completeList:[]
            },
            methods:{
                handleInput(e){
                   this.curMask = e.target.value;
                },
                addMask(){
                    if(this.curMask === ""){return};
                    this.needDoList.push({
                        title:this.curMask,
                        id:Math.random(),                    });
                    this.curMask = "";               
                     },
                doCheck(index,type){
                    if (type === 'need') {
                        const completeMask =  this.needDoList.splice(index,1);
                        this.completeList.push(...completeMask);

                    }else{
                       const noCompleteMask =  this.completeList.splice(index,1);
                       this.needDoList.push(...noCompleteMask);
                    }       
                },
                deleteMask(index,type){
                    // this.needDoList.splice(index,1);
                    const toDoList = type === 'need' ? this.needDoList : this.completeList;
                    toDoList.splice(index,1)

                },
				
			}
        })
    </script>
</body>
</html>